import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Modal, Select, Row, Col, InputNumber } from 'antd'
import { adminCompanyAccoutType } from 'utils/seletLocalData'

const FormItem = Form.Item
const Option = Select.Option
const { TextArea } = Input

const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
}

const modal = ({
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  optionData,
  ...modalProps
}) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        id: item.id || 1,
      }
      // data.address = data.address.join(' ')
      onOk(data)
    })
  }
  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  const accountTypeOption = adminCompanyAccoutType.map(d => <Option key={d.key}>{d.value}</Option>)
  const currenciesOption = optionData.currenciesData.map(d => <Option key={d.code}>{d.code}</Option>)
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <Row>
          {/* <Col span={12}> */}
          {/* <FormItem label="CustomerId" hasFeedback {...formItemLayout}> */}
          {/* {getFieldDecorator('customerId', { */}
          {/* initialValue: item.customerId, */}
          {/* rules: [ */}
          {/* { */}
          {/* required: true, */}
          {/* }, */}
          {/* ], */}
          {/* })(<Input/>)} */}
          {/* </FormItem> */}
          {/* </Col> */}
          <Col span={12}>
            <FormItem label="CustomerNumber" hasFeedback {...formItemLayout}>
              {getFieldDecorator('customerNumber', {
                initialValue: item.customerNumber,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input disabled />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="IdNumber1" hasFeedback {...formItemLayout}>
              {getFieldDecorator('idNumber1', {
                initialValue: item.idNumber1,
              })(<Input disabled />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="IdNumber2" hasFeedback {...formItemLayout}>
              {getFieldDecorator('idNumber2', {
                initialValue: item.idNumber2,
              })(<Input disabled />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="FirstName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('firstName', {
                initialValue: item.firstName,
              })(<Input disabled />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="MiddleName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('middleName', {
                initialValue: item.middleName,
              })(<Input disabled />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="LastName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('lastName', {
                initialValue: item.lastName,
              })(<Input disabled />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="CurrencyCode" hasFeedback {...formItemLayout}>
              {getFieldDecorator('currencyCode', {
                initialValue: item.currencyCode,
              })(<Select style={{ width: '100%' }} disabled>{currenciesOption}</Select>)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="Amount" hasFeedback {...formItemLayout}>
              {getFieldDecorator('amount', {
                initialValue: item.amount,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Type" hasFeedback {...formItemLayout}>
              {getFieldDecorator('type', {
                initialValue: item.type,
              })(<Select style={{ width: '100%' }}>{accountTypeOption}</Select>)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
  optionData: PropTypes.object,
}

export default Form.create()(modal)
